<template>
  <view class="card-info">
    <view class="top-info">
      <view class="top-info-a">住宿空置率</view>
      <view style="flex:1"></view>
      <view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">近七天
      </view>
      <view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">近一月
      </view>
      <view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">近三月
      </view>
      <view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">近半年
      </view>
    </view>
    <echarts :eChartId="'eChartFive'" ref="echartsRef"></echarts>
  </view>
</template>

<script>

export default {
  data() {
    return {
      selectIndex: 1,
      option: {},
      info: {}
    };
  },
  mounted() {
    let that = this
    setTimeout(function () {
      that.initData()
    }, 500)
  },
  methods: {
    initData() {
      this.$api.peopleStayEmpty({dateType: this.selectIndex}).then(res => {
        this.info = res.data;
        this.initEcharts()
      });
    },
    initEcharts() {
      let that = this
      let xArr = []
      let dataArr = []
      for (let i = 0; i < this.info.length; i++) {
        let obj = this.info[i]
        xArr.push(obj.storeName)
        dataArr.push(parseFloat(obj.Proportion.replaceAll('%', ''), 10))
      }
      this.option = {
        grid: {
          top: '10%',
          left: '2%',
          right: '8%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          show: true,
          axisLabel: {
            formatter: '{value} %',
            show: true
          },
          splitLine: {
            // lineStyle: {
            //   type: 'dashed'
            // }
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick:{
            show: true, //不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: 'category',
          inverse: true, // 倒叙
          axisLabel: {
            color: '#A8A8A8',
            formatter: (val) => {
              let showWord = `${val}`
              if(showWord.length > 5){
                return showWord.substring(0,4) + '...'
              }else{
                return showWord
              }
            }
          },
          axisLine: {
            show: false // 轴线
          },
          axisTick:{
            show: false //不显示坐标轴刻度线
          },
          data: xArr
        },
        series: [
          {
            name: 'Echarts',
            type: 'bar',
            barWidth: 15,
            showBackground: true,
            barMaxWidth: 20,
            barMinWidth: 15,
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
              color: '#0061FF',
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c} %',
              // color: fontColor,
              // fontSize: that.$base.nowSize(14)
            },
            data: dataArr
          }
        ],
      }
      this.$refs.echartsRef.changeChart(this.option)
    },
    selectChange(index) {
      this.selectIndex = index
      this.initData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

.stat-one-info {
  display: flex;
  padding-top: 30 rpx;

  .stat-one-word {
    display: flex;
    align-items: center;
    height: 75 rpx;

    .stat-one-word-a {
      font-size: 54 rpx;
      font-weight: 800;
      color: #333333;
    }

    .stat-one-word-b {
      font-size: 20 rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .stat-one-word-c {
    font-size: 20 rpx;
    font-weight: bold;
    color: #A8A8A8;
    height: 50 rpx;
    line-height: 50 rpx;
  }

  img {
    height: 120 rpx;
    width: 300 rpx;
  }
}

</style>
